<!DOCTYPE html>
<html lang="en" xmlns:outline="http://www.w3.org/1999/xhtml" xmlns:a="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>ServerList</title>
    <link rel="stylesheet" type="text/css" media="all" href="/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" media="all" href="/css/common.css"/>
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/myJs.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="/css/CaseManager.css"/>
</head>
<body>

    <div class="layui-fluid">
        <div class="layui-col-xs12">
            <br/> <br/>
            <div id="退出1" class="layui-form layui-col-xs-offset11"  >

            </div>
            <div class="layui-col-xs-offset10">
                <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
                <a href="/server/baseServer" target="_blank" class="layui-icon  layui-icon-username"></a>
            </div>
            <br/>
            <div class="layui-inline">
                <input class="layui-btn  layui-btn-warm"  style="width: 600px ;border:0" type="button" value="服务管理" />
                <input class="layui-btn layui-btn-primary" style="width: 600px;border:0" type="button" value="服务状态" onclick="tow()" />
                <input class="layui-btn  layui-btn-primary" style="width: 600px;border:0" type="button" value="部署申请" onclick="four()" />
            </div>
            <br/><br/><br/>

        </div>
        <div class="row">
            <div class="layui-col-sm12">

                <!--<div style="width: 160px; font-weight: bolder; font-size: large; margin-top: 20px; margin-left: auto; margin-right: auto">服务列表</div><br/>-->
                <div class="layui-col-xs2">
                    所属系统：
                    <div class="layui-input-inline" style="width: 160px;">
                        <div class="layui-form">
                            <select name="SystemType" id="SystemType">
                                <option value="">全部系统</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    服务类型：
                    <div  class="layui-input-inline" style="width: 160px;">
                        <div class="layui-form">
                            <select name="BaseServerType" id="BaseServerType">
                                <option value="">全部类型</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2">
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
            </div>
            <div class="layui-col-xs-offset10">
                <a href="#" target="_blank"  onclick="Add()">添加服务</a>
            </div>
            <table class="layui-table" id="BaseServerList" lay-filter="table"></table>
        </div>
    </div>
    <div class="fly-footer">
        <p><a target="_blank">我打 - 服务管理系统</a> 2018</p>
    </div>
    <script>
        function Add(){
            loadPage("/server/addNewServer");
        }
        function loadPageWithBlank(url) {
            window.open(url);
        }
        function loadPage(url) {
            window.location.href = url;
        }
    </script>
    <script>
        layui.use('table', function(){
            var table = layui.table,$ = layui.jquery;
            table.render({
                elem: '#BaseServerList'
                ,url:'/server/getBaseServerForPaging'
                ,cellMinWidth: 80
                ,page: true
                ,id:'baseServerID'
                ,cols: [[
                    {field:'serverId', title: 'ID',align:'center', width: 60}
                    ,{field:'vServerName', title: '服务名', align:'center', width: 260}
                    ,{field:'vSystem', title: '所属系统',  align:'center', width: 100}
                    ,{field:'vGitUrl', title: 'Git地址', align:'center', width: 80}
                    ,{field:'vLanguage', title: '开发语言', align:'center', minWidth: 300}
                    ,{field:'vProduct', title: '产物类型', align:'center', minWidth: 300}
                    ,{field:'vLeader', title: '负责人', align:'center', width: 200}
                    ,{fixed: 'right', width:240, align:'center', toolbar: '#EditBaseServer'}
                ]],
                where: {
                    BaseServerType: '',
                    SystemType: ''
                },
                request: {
                    //页码的参数名称，默认：page
                    pageName: 'pageNumber',
                    //每页数据量的参数名，默认：limit
                    limitName: 'pageSize'
                },
                response: {
                    //数据总数的字段名称，默认：count
                    countName: 'total',
                    //数据列表的字段名称，默认：data
                    dataName: 'rows'
                }
            });
            var $ = layui.$, active = {
                /*表格重载*/
                reload: function(){
                    var BaseServerType = $('#BaseServerType');
                    var SystemType = $('#SystemType');

                    table.reload('baseServerID', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            BaseServerType: BaseServerType.val(),
                            SystemType: SystemType.val(),
                        }
                    });
                },
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('.layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            table.on('tool(table)', function(obj){
                var data = obj.data;

                if(obj.event === 'detail'){
                    loadPageWithBlank("/server/serverDetail?serverId=" + data.serverId)
                }
            });
        });
        function tow(){
            loadPage("/server/buildRecord")
        }
        function three(){
            loadPage("/server/buildAuditList")
        }
        function four() {
            loadPage("/server/buildApply")
        }
    </script>

    <script type="text/html" id="EditBaseServer">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看/编辑</a>
    </script>

</body>
</html>